import { FC, useState } from 'react';
import { Card, Button, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const Buttons: FC = () => {
  const [loading, setLoading] = useState<boolean>(false);

  const fn = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 500);
  };

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="基础按钮">
        <Space>
          <Button type="primary" size="large">
            Primary Button
          </Button>
          <Button>Default Button</Button>
        </Space>
      </Card>

      <Card title="图形按钮">
        <Space>
          <Button type="primary" icon={<SearchOutlined />}>
            Search
          </Button>
        </Space>
      </Card>

      <Card title="Loading按钮">
        <Space>
          <Button type="primary" loading={loading} onClick={fn}>
            Loading
          </Button>
        </Space>
      </Card>
    </Space>
  );
};

export default Buttons;
